<template>
  <el-dialog
    :title="view === 'detail'? '商户信息详情': ''"
    :visible="true"
    custom-class="orderDetailWrapper"
    :before-close="closeDialog"
    >
    <vue-body>
    	<el-form :model="tableData" label-width="120px">
    		<el-form-item label="优惠券名称">
        	<el-input v-model="tableData.couponName" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
        <el-form-item label="优惠券类型">
      		<div class="typeBox">
            {{this.tableData.type | type }}
          </div>
      	</el-form-item>
        <el-form-item label="发券途径">
      		<div class="typeBox">
            {{this.tableData.promAppro | promAppro }}
          </div>
      	</el-form-item>
      	<el-form-item label="抵用券限制金额" v-if="tableData.type == 'voucher'">
        	<el-input v-model="tableData.restricted" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="优惠券面值">
        	<el-input v-model="tableData.denomination" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="总数量">
        	<el-input v-model="tableData.num" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="有效期开始时间">
        	<el-input v-model="tableData.validatyBegin" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
    		<el-form-item label="有效期结束时间">
        	<el-input v-model="tableData.validatyEnd" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item v-if="tableData.disableDate != ''" label="限制使用日期">
          <div class="typeBox">
            <span style="padding-right:10px" v-for="(item,index) in tableData.disableDate" :key="index">
              星期{{item}}
            </span>
          </div>
      	</el-form-item>
      	<el-form-item label="使用时间段">
        	<el-input v-model="tableData.useTime" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
      	<el-form-item label="电子券状态">
      		<div class="typeBox">
        		{{this.tableData.couponUsedType | couponUsedType }}
        	</div>
      	</el-form-item>
      	<el-form-item label="现金价格">
        	<el-input v-model="tableData.cash" auto-complete="off" readonly="readonly"></el-input>
      	</el-form-item>
    	</el-form>
    </vue-body>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="info" @click="submit('ruleForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { detail } from "@/services/coupons";
import { RequestError } from "@/services/errors";
import { mapActions } from "vuex";
export default {
  name: "edit-role",
  data () {
    return {
      loading: false,
      orderNo:"",
      formData: {
      },
      dialogFormVisible: false,
      tableData: {},
      id:""
    }
  },
  props: {
    view: {
      type: String,
      default: "detail"
    }
  },
  methods: {
    ...mapActions(["setUserInfo"]),
    closeDialog() {
      this.$emit("close");
    },
    submit() {
    	this.$emit("close");
    },
    async loadData () {
        this.loading = true
        try {
          let data = await detail(this.id)
          // debugger
          this.tableData = data.data
          if(this.tableData.disableDate[0] == '[]'){
            this.tableData.disableDate = ''
          }
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
        this.loading = false
    },
  },
  mounted() {
  	
  },
  filters: {
      promAppro (value) {
      	//发券途径
        return {'general': '普通券'}[value]
      },
      useRule (value) {
      	//使用规则
        return {'D': '和其他优惠券一起使用', 'M': '叠加使用'}[value]
      },
      type (value) {
      	//券类型
        return {'rebate': '折扣券', 'voucher': '抵用券'}[value]
      },
      couponUsedType(value) {
      	//电子券状态
        return {'default': '默认', 'share': '可分享', 'useonly': '只可使用'}[value]
      },
      couponType(value) {
      	//第三方券类型
        return {'default': '默认', 'third': '第三方'}[value]
      },
      thirdType(value) {
      	//使用描述类型
        return {'default': '默认', 'url': '链接'}[value]
      },
  },
};
</script>
<style>
.el-select {
  width: 100%;
}
.orderDetailWrapper{
  width: 50%;
}
.typeBox{
	background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
    box-sizing: border-box;
    color: #1f2d3d;
    font-size: inherit;
    height: 36px;
    line-height: 30px;
    outline: 0;
    padding: 3px 10px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.logoImg{
	height: 120px;
	border-radius: 4px;
	border: 1px solid #bfcbd9;
	padding: 5px;
}
</style>
